import { InfoCircleOutlined } from '@ant-design/icons';
import { Area, Column } from '@ant-design/plots';
import { Col, message, Progress, Row, Tooltip } from 'antd';
import { ChartCard, Field } from './charts';
import { useEffect, useState } from 'react';
import dayjs from 'dayjs';
import {
  getDiffInterfaceMethodCountUsingGet,
  getInterfaceApplyRecordByDateUsingGet,
  getUserRegisterRecordByDateUsingGet,
} from '@/services/api-share-backhend/analysiController';
import MyColumnForMethod from "@/components/charts/MyColumnForMethod";

const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 8,
  style: {
    marginBottom: 12,
  },
};
const HeadColums = () => {
  const [totalApplyReacord, setTotalApplyRecord] = useState();
  const [todayApplyReacord, setTodayApplylRecord] = useState();
  const [applyDateDataSource, setApplyDateDataSource] = useState();

  const [registerDateDataSource, setRegisterDateDataSource] = useState();
  const [totalRegisterReacord, setTotalRegisterRecord] = useState();
  const [todayRegisterReacord, setTodayRegisterlRecord] = useState();

  const [methodDataSource, setMethodDataSource] = useState();
  const [totalMethodReacord, setTotalMethodRecord] = useState();
  const [loading, setLoading] = useState(false);
  const getApplyNumsDates = async () => {
    try {
      const res = await getInterfaceApplyRecordByDateUsingGet();
      if (res.data !== null || res.data === undefined) {
        const data = res.data.interfaceApplyRecordColum.reduce((acc, item) => {
          acc.push({
            x: dayjs(item.createDate).format('YYYY-MM-DD'),
            y: item.recordCount,
          });
          return acc;
        }, []);
        setApplyDateDataSource(data);
        setTotalApplyRecord(res.data.totalRecord);
        setTodayApplylRecord(res.data.todayRecord);
      } else {
        message.error(res.message);
      }
    } catch (e) {}
  };

  const getUserRegisterDates = async () => {
    try {
      const res = await getUserRegisterRecordByDateUsingGet();
      if (res.data !== null || res.data === undefined) {
        const data = res.data.userRegisterColums.reduce((acc, item) => {
          acc.push({
            x: dayjs(item.createDate).format('YYYY-MM-DD'),
            y: item.recordCount,
          });
          return acc;
        }, []);
        setRegisterDateDataSource(data);
        setTotalRegisterRecord(res.data.totalRecord);
        setTodayRegisterlRecord(res.data.todayRecord);
      } else {
        message.error(res.message);
      }
    } catch (e) {
      message.error(e);
    }
  };
  const getMethodCount = async () => {
    try {
      const res = await getDiffInterfaceMethodCountUsingGet();
      if (res.data !== null || res.data === undefined) {
        console.log(res);
        let totalCount = 0;
        const data = res.data.reduce((acc, item) => {
          acc.push({
            genre: item.method,
            sold: item.count,
          });
          totalCount += item.count;
          return acc;
        }, []);
        setMethodDataSource(data);
        setTotalMethodRecord(totalCount);
      } else {
        message.error(res.message);
      }
    } catch (e) {
      message.error(e);
    }
  };
  useEffect(() => {
    getApplyNumsDates();
    getUserRegisterDates();
    getMethodCount();
  }, []);

  // visitData2.push({
  //   x: dayjs(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
  //   y: fakeY2[i],
  // });

  return (
    <Row gutter={24}>
      <Col {...topColResponsiveProps}>
        <ChartCard
          bordered={false}
          title="各类请求方式接口数量"
          action={
            <Tooltip title="各类请求方式接口数量（PUT、GET、POST、DELETE）">
              <InfoCircleOutlined />
            </Tooltip>
          }
          loading={loading}
          total={totalMethodReacord}
          contentHeight={92}
        >
          <MyColumnForMethod

            data={methodDataSource}
          />
        </ChartCard>
      </Col>

      <Col {...topColResponsiveProps}>
        <ChartCard
          bordered={false}
          loading={loading}
          title="用户注册趋势"
          action={
            <Tooltip title="每日用户注册的数量">
              <InfoCircleOutlined />
            </Tooltip>
          }
          total={totalRegisterReacord}
          footer={<Field label="今日注册数量" value={todayRegisterReacord} />}
          contentHeight={60}
        >
          <Area
            xField="x"
            yField="y"
            shapeField="smooth"
            height={46}
            axis={false}
            style={{
              fill: 'linear-gradient(-90deg, white 0%, #975FE4 100%)',
              fillOpacity: 0.6,
              width: '100%',
            }}
            tooltip={(data) => ({
              name: '当日注册',
              value: `${data.y}次`,
            })}
            padding={-20}
            data={registerDateDataSource}
          />
        </ChartCard>
      </Col>
      <Col {...topColResponsiveProps}>
        <ChartCard
          bordered={false}
          loading={loading}
          title="用户总申请开通次数"
          action={
            <Tooltip title="按日统计系统的申请数量">
              <InfoCircleOutlined />
            </Tooltip>
          }
          total={totalApplyReacord}
          footer={<Field label="今日申请" value={todayApplyReacord} />}
          contentHeight={60}
        >
          <Column
            xField="x"
            yField="y"
            padding={-20}
            axis={false}
            height={46}
            data={applyDateDataSource}
            scale={{ x: { paddingInner: 0.4 } }}
            tooltip={(data) => ({
              name: '当日申请',
              value: `${data.y}次`,
            })}
          />
        </ChartCard>
      </Col>
      {/*<Col {...topColResponsiveProps}>*/}
      {/*  <ChartCard*/}
      {/*    loading={loading}*/}
      {/*    bordered={false}*/}
      {/*    title="运营活动效果"*/}
      {/*    action={*/}
      {/*      <Tooltip title="指标说明">*/}
      {/*        <InfoCircleOutlined />*/}
      {/*      </Tooltip>*/}
      {/*    }*/}
      {/*    total="78%"*/}
      {/*    footer={*/}
      {/*      <div*/}
      {/*        style={{*/}
      {/*          whiteSpace: 'nowrap',*/}
      {/*          overflow: 'hidden',*/}
      {/*        }}*/}
      {/*      >*/}
      {/*        <Trend*/}
      {/*          flag="up"*/}
      {/*          style={{*/}
      {/*            marginRight: 16,*/}
      {/*          }}*/}
      {/*        >*/}
      {/*          周同比*/}
      {/*          <span className={styles.trendText}>12%</span>*/}
      {/*        </Trend>*/}
      {/*        <Trend flag="down">*/}
      {/*          日同比*/}
      {/*          <span className={styles.trendText}>11%</span>*/}
      {/*        </Trend>*/}
      {/*      </div>*/}
      {/*    }*/}
      {/*    contentHeight={46}*/}
      {/*  >*/}
      {/*    <Progress percent={78} strokeColor={{ from: '#108ee9', to: '#87d068' }} status="active" />*/}
      {/*  </ChartCard>*/}
      {/*</Col>*/}
    </Row>
  );
};
export default HeadColums;
